<template>
  <!-- 角色管理-->
  <div>
    <div class="topView">
      <el-form>
        <el-button size="small" class="addBtn" @click="addClickfunc"
          >添加</el-button
        >
      </el-form>
    </div>

    <!-- 表格内容 -->
    <div class="bgView">
      <el-table :data="tableData" border max-height="700px" style="width: 100%">
        <el-table-column
          prop="role"
          label="角色名称"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="addTime"
          label="添加时间"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="operator"
          label="操作人"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="changeTime"
          label="修改时间"
          align="center"
        ></el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="210px"
          align="center"
        >
          <template v-slot="scope">
            <el-button
              @click="editClick(scope.row, scope.$index)"
              size="mini"
              style="background: rgb(41, 59, 105); color: white"
              >编辑
            </el-button>
            <el-button
              @click="delegateClick(scope.row, scope.$index)"
              size="mini"
              style="background: rgb(190, 15, 1); color: white"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      width="50%"
      title="角色管理"
      :visible.sync="editdialogClick"
      align="left"
    >
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>

      <el-form :label-width="formLabelWidth">
        <el-form-item label="角色名称:" align="center">
          <el-input placeholder="请输入名称"></el-input>
        </el-form-item>

        <el-form-item label="角色权限:">
          <el-tree
            :data="treedata"
            :props="defaultProps"
            show-checkbox
            @check-change="handleCheckChange"
          >
          </el-tree>
        </el-form-item>
      </el-form>

      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: 20px;
          margin-bottom: 20px;
        "
      ></div>
      <el-row align="center">
        <el-button
          @click="cancelClick()"
          size="mini"
          style="background: rgb(41, 59, 105); color: white"
          >取消
        </el-button>
        <el-button
          @click="confirmClick()"
          size="mini"
          style="background: rgb(41, 59, 105); color: white"
          >确定
        </el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "roleManage",
  data() {
    return {
      tableData: [
        {
          user: "用户名",
          tel: "手机号",
          roleName: "角色名称",
          loginNum: "登录次数",
          Operator: "操作人",
          addTime: "添加时间",
          lastLoginTime: "最后一次登录时间",
        },
      ],
      editdialogClick: false,
      checked: false,

      treedata: [
        {
          label: "后市场",
          children: [
            {
              id: 1,
              label: "预付款记录",
            },
            {
              id: 2,
              label: "发票列表",
            },
            {
              id: 3,
              label: "预付款分配",
            },
            {
              id: 4,
              label: "银行卡",
            },
            {
              id: 5,
              label: "查询报表",
            },
            {
              id: 6,
              label: "订单查询",
            },
            {
              id: 7,
              label: "退款记录",
            },
            {
              id: 8,
              label: "共享账户",
            },
            {
              id: 9,
              label: "信用销售账户",
            },
            {
              id: 10,
              label: "信用订单",
            },
            {
              id: 11,
              label: "共享订单",
            },
            {
              id: 12,
              label: "车队长列表",
            },
            {
              id: 13,
              label: "车队长划拨记录",
            },
          ],
        },
      ],
      defaultProps: {
        label: "label",
        children: "children",
      },
      formLabelWidth: "120px",

    };
  },
  computed: {},

  methods: {
    //添加
    addClickfunc() {
      console.log("添加");
      this.editdialogClick = true;
    },
    //编辑
    editClick(row, index) {
      console.log(row, index);
    },
    //删除
    delegateClick(row, index) {
      console.log(row, index);
    },

    //节点选中状态发生变化时的回调,
    //传递给 data 属性的数组中该节点所对应的对象、
    //节点本身是否被选中、
    //节点的子树中是否有被选中的节点
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },

    loadNode(node, resolve) {},

    handleNodeClick(data) {
      console.log(data);
    },

    cancelClick() {
      console.log("取消");
      this.editdialogClick = false;
    },
    confirmClick() {
      console.log("确定");
    },
  },
};
</script>

<style scoped>
.topView {
  border: 1px solid rgb(228, 228, 288);
  background-color: white;
  width: 98%;
  height: 30px;
  padding: 20px;
}
.addBtn {
  margin-left: 10px;
  background: rgb(68, 98, 170);
  color: white;
}

.bgView {
  margin-top: 20px;
}

.el-input {
  width: 70%;
  margin-left: -80px;
}
</style>
